<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./three.js"></script>

    <title>Document</title>
  </head>
  <body></body>
  <script>
    // var Three = new THREE
    console.log("THREE", THREE);
    const scene = new THREE.Scene(); // 新建一个场景
    const camera = new THREE.PerspectiveCamera( // 添加摄像头
      50,
      window.innerWidth / window.innerHeight,
      0.3,
      1000
    );
    const renderer = new THREE.WebGLRenderer(); // 渲染函数
    renderer.setSize(window.innerWidth, window.innerHeight);  // 设置外框
    const geometry = new THREE.BoxGeometry(); // 设计几何学形状
    const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });  // 材质
    const cube = new THREE.Mesh(geometry, material);  // 啮合形状跟材质
    scene.add(cube);

    camera.position.z = 5; // z轴 也就是正向的距离
    // renderer.domElement 实际上就是渲染成了canvas
    document.body.appendChild(renderer.domElement);
    function animate() { // 动画 需要用到requestAnimationFrame
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</html>
